<template>
	<div class="TimeStamp">
		<el-dialog :visible.sync="showTimeStamp" width="60%" :show-close="false" custom-class="TimeStamp-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
			<div slot="title" class="dialog-title">
				<span class="text">配置时间戳</span>
				<!-- <el-switch v-model="isShowVideo" @change="switchPreview"> </el-switch> -->
			</div>
			<div class="icon">
				<div v-for="item in time" :key="item.id" :class="item.id == active ? 'blue' : 'white'" @click="clickTime(item)">
					<p class="p-item" :class="'space' + item.id">
						<span class="year">{{ item.year }}</span>
						<span class="hour">{{ item.hour }}</span>
					</p>
				</div>
			</div>
			<div class="right">
				<div class="video">
					<!-- <MediaStream ref="mediaBox" v-if="isShowVideo" class="mediaStream"></MediaStream>
						<span class="not-yet" v-if="isTime.length === 0">暂无画面</span> -->
					<div class="video-text" :class="{ padding: !isShowSwitch }">
						<div class="sixteen-ninet" v-if="!isShowSwitch">
							<img class="watermarkConfig" src="@/assets/img/watermarkConfig.png" alt="" />
						</div>
						<div class="four-three" v-show="isShowSwitch">
							<img class="watermarkConfig" src="@/assets/img/watermarkConfig.png" alt="" />
						</div>
						<p ref="timer" class="video-time" :class="['video' + isTime.id, radio]" v-if="positionRadio !== ''">
							<span class="year">{{ isTime.year }}</span>
							<span class="hour">{{ isTime.hour }}</span>
						</p>
					</div>

					<div style="margin-top: 15px">
						<span class="size">效果框展示比例：</span>
						<span class="size">16 :9 </span>
						<el-switch v-model="isShowSwitch" @change="switchBox" active-color="#6384fe" inactive-color="#6384fe" style="width: 30px; margin: -4px 5px 0 6px"> </el-switch>
						<span class="size">4 :3 </span>
					</div>
				</div>
				<div class="radio">
					<span>请选择时间戳位置:</span>
					<div style="margin-top: 12px">
						<el-radio-group v-model="positionRadio" @change="changeRadio">
							<div>
								<el-radio :label="'nw'">左上方</el-radio>
								<el-radio :label="'n'">正上方</el-radio>
								<el-radio :label="'ne'">右上方</el-radio>
							</div>
							<div style="margin-top: 10px">
								<el-radio :label="'sw'">左下方</el-radio>
								<el-radio :label="'s'">正下方</el-radio>
								<el-radio :label="'se'">右下方</el-radio>
							</div>
						</el-radio-group>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelTimeStamp">取 消</el-button>
				<el-button type="primary" @click="submitTimeStamp">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
// import MediaStream from '../components/MediaStream.vue';
export default {
	components: { },
	props: {
		showTimeStamp: {
			type: Boolean,
			required: true,
			default: () => false
		},
		isActive: {
			type: Number,
			required: true,
			default: () => 0
		},
		time: {
			type: Array,
			required: true,
			default: () => []
		},
		isTime: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			positionRadio: '',
			active: 0,
			isShowVideo: false,
			isShowSwitch: false
		};
	},
	computed: {
		...mapState({
			radio: state => state.systemSetting.radioType || ''
		})
	},
	watch: {},
	created() {},
	mounted() {
		this.positionRadio = this.radio ? this.radio : '';
		this.active = this.isActive;
	},
	methods: {
		...mapMutations('systemSetting', ['SET_RADIO_TYPE', 'SET_SHOW_VIDEO']),
		//取消
		cancelTimeStamp() {
			if (this.isShowVideo) {
				this.$refs.mediaBox.stopLocalStream();
			}
			this.isShowVideo = false;
			this.$emit('cancelTimeStamp');
		},
		//应用
		submitTimeStamp() {
			if (this.isShowVideo) {
				this.$refs.mediaBox.stopLocalStream();
			}
			this.isShowVideo = false;
			console.log(this.active, this.positionRadio);
			this.$emit('submitTimeStamp', this.active, this.positionRadio);
		},
		//选择时间戳
		clickTime(item) {
			this.active = item.id;
			this.changeRadio();
			this.$emit('clickTime', item);
		},
		//选择显示位置
		changeRadio() {
			this.position = this.positionRadio;
			this.$store.commit('SET_RADIO_TYPE', this.positionRadio);
		},
		switchPreview() {
			if (!this.isShowVideo) {
				this.$refs.mediaBox.stopLocalStream();
			} else {
				this.$nextTick(async () => {
					let stream = await this.$refs.mediaBox.getUserMedia();
					if (!stream) {
						this.isShowVideo = !this.isShowVideo;
						return;
					}
				});
			}
		},
		switchBox() {}
	}
};
</script>
<style lang="less" scoped>
.TimeStamp {
	.el-dialog {
		.dialog-title {
			.text {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 24px;
			}
		}
		.icon {
			// width: 70%;
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			margin-right: 28px;
			.white {
				width: 48%;
				cursor: pointer;
				background: #ffffff;
				border: 1px solid #ededed;
				border-radius: 4px;
				margin: 5px;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				.p-item {
					max-width: 80%;
					padding: 0 14px;
					background: #000000;
					opacity: 0.6;
					border-radius: 4px;
					.year {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 16px;
					}
					.hour {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 16px;
					}
				}
				.space2 {
					width: 108px;
				}
				.space3 {
					width: 108px;
				}
				.space4 {
					max-width: 90%;
				}
				.space5 {
					width: 118px;
					.year {
						margin-right: 70%;
					}
				}
				.space6 {
					min-width: 118px;
				}
			}
			.blue {
				width: 48%;
				cursor: pointer;
				background: #ffffff;
				border: 1px solid #6384fe;
				border-radius: 4px;
				margin: 5px;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				.p-item {
					max-width: 80%;
					padding: 0 14px;
					background: #000000;
					opacity: 0.6;
					border-radius: 4px;
					.year {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 16px;
					}
					.hour {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 16px;
					}
				}
				.space2 {
					width: 108px;
				}
				.space3 {
					width: 108px;
				}
				.space4 {
					max-width: 90%;
				}
				.space5 {
					width: 118px;
					.year {
						margin-right: 70%;
					}
				}
			}
		}
		.right {
			min-width: 230px;
			.video {
				position: relative;
				// .mediaStream {
				// 	width: 290px;
				// 	height: 152px;
				// 	overflow: hidden;
				// 	border-radius: 6px;
				// }
				.video-text {
					position: relative;
					background-color: #000000;
					display: inline-block;
					overflow: hidden;
					// width: 260px;
					// height: 147px;
					// background: #000000;
					border-radius: 6px;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// overflow: hidden;

					// .not-yet {
					// 	height: 12px;
					// 	font-size: 12px;
					// 	font-family: PingFang SC;
					// 	font-weight: 400;
					// 	color: #cccccc;
					// 	line-height: 24px;
					// 	margin-top: 4px;
					// }
					.sixteen-ninet {
						padding: 0 36px;
					}
					.four-three {
						padding: 0 5px !important;
					}
					.sixteen-ninet,
					.four-three {
						background-color: #000000;
					}
					img.watermarkConfig {
						width: 188px;
					}
				}
				.video-time {
					position: absolute;
					background: rgba(0, 0, 0, 0.25);
					padding: 0 14px;
					border-radius: 6px;
					// width: 58%;
					.year {
						color: #ffffff;
					}
					.hour {
						color: #ffffff;
					}
				}
				.video2 {
					width: 110px;
				}
				.video3 {
					width: 110px;
				}
				.video4 {
					width: 164px;
				}
				.video5 {
					width: 120px;
					.year {
						margin-right: 10px;
					}
				}
				.video6 {
					width: 188px;
				}
			}
			.radio {
				margin-top: 20px;
			}
		}
	}
	.el-dialog .dialog-title {
		display: flex;
		justify-content: space-between;
	}
	.el-dialog .el-switch {
		width: 38px;
		margin-top: 1px;
	}
	.nw {
		top: 10px;
		left: 10px;
	}
	.n {
		width: 165px;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.ne {
		right: 10px;
		top: 10px;
	}
	.sw {
		left: 10px;
		bottom: 10px;
	}
	.s {
		width: 165px;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.se {
		right: 10px;
		bottom: 10px;
	}
}
</style>
<style lang="less">
.TimeStamp-dialog {
	padding: 0;
	.el-dialog__body {
		border-top: 1px solid #eee;
		display: flex;
	}
}
</style>
